<!DOCTYPE html>
<!--
 * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html
  <head>
    <script src="js/binaryajax.js"></script>
    <script src="js/imageinfo.js" ></script>
    <script src="js/exif.js" ></script>
    <style>
      body {
        font: 14px Arial;
      }

      h1 {
        margin: 30px 0 5px 0;
        padding: 0;
      }
      code {
        padding: 0;
        margin: 5px 0;
        display: block;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        margin: 15px 0;
      }
      td, th {
        padding: 4px;
      }
      th {
        text-align: left;
        width: 130px;
      }
      tr {
        display: none;
      }
      tr.rendered {
        display: block;
      }
      tr.rendered:nth-child(odd) {
        background: #eee;
      }
      #thumbnail {
        position: fixed;
        right: 20px;
        top: 20px;
        -webkit-box-shadow: 1px 1px 6px #000;
        border: 4px solid #fff;
        background: #fff;
      }
      #loader {
        font: 30px Arial;
        text-align: center;
        padding: 100px;
      }
    </style>
    <script>
      /**
       * Quick template rendering function.  For each cell passed to it, check
       * to see if the cell's text content is a key in the supplied data array.
       * If yes, replace the cell's contents with the corresponding value and
       * unhide the cell.  If no, then remove the cell's parent (tr) from the
       * DOM.
       */
      function renderCells(cells, data) {
        for (var i = 0; i < cells.length; i++) {
          var cell = cells[i];
          var key = cell.innerText;
          if (data[key]) {
            cell.innerText = data[key];
            cell.parentElement.className = "rendered";
          } else {
            cell.parentElement.parentElement.removeChild(cell.parentElement);
          }
        }
      };

      /**
       * Returns true if the supplies object has no properties.
       */
      function isEmpty(obj) {
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            return false;
          }
        }
        return true;
      };

      /**
       * Resizes the window to the current dimensions of this page's body.
       */
      function resizeWindow() {
        window.setTimeout(function() {
          chrome.tabs.getCurrent(function (tab) {
            var newHeight = Math.min(document.body.offsetHeight + 140, 700);
            chrome.windows.update(tab.windowId, {
              height: newHeight,
              width: 520
            });
          });
        }, 150);
      };

      /**
       * Called directly by the background page with information about the
       * image.  Outputs image data to the DOM.
       */
      function renderImageInfo(imageinfo) {
        console.log('imageinfo', imageinfo);

        var divloader = document.querySelector('#loader');
        var divoutput = document.querySelector('#output');
        divloader.style.display = "none";
        divoutput.style.display = "block";

        var divinfo = document.querySelector('#info');
        var divexif = document.querySelector('#exif');

        // Render general image data.
        var datacells = divinfo.querySelectorAll('td');
        renderCells(datacells, imageinfo);

        // If EXIF data exists, unhide the EXIF table and render.
        if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
          divexif.style.display = 'block';
          var exifcells = divexif.querySelectorAll('td');
          renderCells(exifcells, imageinfo['exif']);
        }
      };

      /**
       * Renders the URL for the image, trimming if the length is too long.
       */
      function renderUrl(url) {
        var divurl = document.querySelector('#url');
        var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
        var anchor = document.createElement('a');
        anchor.href = url;
        anchor.innerText = urltext;
        divurl.appendChild(anchor);
      };

      /**
       * Renders a thumbnail view of the image.
       */
      function renderThumbnail(url) {
        var canvas = document.querySelector('#thumbnail');
        var context = canvas.getContext('2d');

        canvas.width = 100;
        canvas.height = 100;

        var image = new Image();
        image.addEventListener('load', function() {
          var src_w = image.width;
          var src_h = image.height;
          var new_w = canvas.width;
          var new_h = canvas.height;
          var ratio = src_w / src_h;
          if (src_w > src_h) {
            new_h /= ratio;
          } else {
            new_w *= ratio;
          }
          canvas.width = new_w;
          canvas.height = new_h;
          context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
        });
        image.src = url;
      };

      /**
       * Returns a function which will handle displaying information about the
       * image once the ImageInfo class has finished loading.
       */
      function getImageInfoHandler(url) {
        return function() {
          renderUrl(url);
          renderThumbnail(url);
          var imageinfo = ImageInfo.getAllFields(url);
          renderImageInfo(imageinfo);
          resizeWindow();
        };
      };
    </script>
  </head>
  <body>
    <div id="loader">
      Loading... <img src="images/loader.gif" />
    </div>
    <div id="output" style="display:none">
      <div id="info">
        <h1>Image Information</h1>
        <code id="url"></code>
        <canvas id="thumbnail"></canvas>
        <table>
          <tr>
            <th>Format</th>
            <td>format</td>
          </tr>
          <tr>
            <th>Version</th>
            <td>version</td>
          </tr>
          <tr>
            <th>Width</th>
            <td>width</td>
          </tr>
          <tr>
            <th>Height</th>
            <td>height</td>
          </tr>
          <tr>
            <th>Mime Type</th>
            <td>mimeType</td>
          </tr>
          <tr>
            <th>Size (Bytes)</th>
            <td>byteSize</td>
          </tr>
        </table>
      </div>
      <div id="exif" style="display:none;">
        <h2>EXIF Information</h2>
        <table>
          <tr>
            <th>Date</th>
            <td>DateTime</td>
          </tr>
          <tr>
            <th>Aperture</th>
            <td>ApertureValue</td>
          </tr>
          <tr>
            <th>Exposure</th>
            <td>ExposureTime</td>
          </tr>
          <tr>
            <th>Shutter Speed</th>
            <td>ShutterSpeedValue</td>
          </tr>
          <tr>
            <th>ISO</th>
            <td>ISOSpeedRatings</td>
          </tr>
          <tr>
            <th>Camera Make</th>
            <td>Make</td>
          </tr>
          <tr>
            <th>Camera Model</th>
            <td>Model</td>
          </tr>
          <tr>
            <th>Software</th>
            <td>Software</td>
          </tr>
          <tr>
            <th>XResolution</th>
            <td>XResolution</td>
          </tr>
          <tr>
            <th>YResolution</th>
            <td>YResolution</td>
          </tr>
          <tr>
            <th>Flash</th>
            <td>Flash</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
      // The URL of the image to load is passed on the URL fragment.
      var imageUrl = window.location.hash.substring(1);
      if (imageUrl) {
        // Use the ImageInfo library to load the image and parse it.
        ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl));
      }
    </script>
  </body>
</html>